<template>
  <div class="table">
    <div class="tab-le">
      <div class="header">
        <div class="row">
          <div class="row-item">{{ mapData.serviceNum }}</div>
          <div class="row-item">{{ mapData.goodsName }}</div>
          <div class="row-item">{{ mapData.standardName }}</div>
          <div class="row-item">{{ mapData.price }}</div>
        </div>
      </div>
      <div class="content">
        <div
          @click="handTableRowClick(item)"
          v-for="item in tableDataList.slice(0, 16)"
          :key="item.serviceCode"
          :class="[
            'row',
            {
              'row-click': tableClickItem.some(
                (i) => i.serviceCode === item.serviceCode
              )
            },
            { 'row-input': inputTable.list.includes(item.serviceCode) }
          ]"
        >
          <!-- 内容-序号 -->
          <div class="row-item item-center">{{ item.serviceNum }}</div>
          <!-- 内容-监测品种 -->
          <el-tooltip
            effect="dark"
            :content="item.goodsName"
            placement="top"
            :visible="item.tooltipgood"
          >
            <div
              class="row-item item-ellipsis"
              @mouseenter="
                handTableItemEnter(item.serviceNum - 1, $event, 'tooltipgood')
              "
              @mouseleave="
                handTableItemLeave(
                  item.serviceNum - 1,
                  item.tooltipgood,
                  'tooltipgood'
                )
              "
            >
              {{ item.goodsName }}
            </div>
          </el-tooltip>
          <!-- 内容-规格等级 -->
          <el-tooltip
            effect="dark"
            :content="item.standardName"
            placement="top"
            :visible="item.tooltipstand"
          >
            <div
              class="row-item item-ellipsis"
              @mouseenter="
                handTableItemEnter(item.serviceNum - 1, $event, 'tooltipstand')
              "
              @mouseleave="
                handTableItemLeave(
                  item.serviceNum - 1,
                  item.tooltipstand,
                  'tooltipstand'
                )
              "
            >
              {{ item.standardName }}
            </div>
          </el-tooltip>
          <!-- 内容-价格 -->
          <div class="row-item item-center">{{ item.price }}</div>
        </div>
      </div>
    </div>
    <div class="tab-ri">
      <div class="header">
        <div class="row">
          <div class="row-item">{{ mapData.serviceNum }}</div>
          <div class="row-item">{{ mapData.goodsName }}</div>
          <div class="row-item">{{ mapData.standardName }}</div>
          <div class="row-item">{{ mapData.price }}</div>
        </div>
      </div>
      <div class="content">
        <div
          @click="handTableRowClick(item)"
          v-for="item in tableDataList.slice(16)"
          :key="item.serviceCode"
          :class="[
            'row',
            {
              'row-click': tableClickItem.some(
                (i) => i.serviceCode === item.serviceCode
              )
            },
            { 'row-input': inputTable.list.includes(item.serviceCode) }
          ]"
        >
          <!-- 内容-序号 -->
          <div class="row-item item-center">{{ item.serviceNum }}</div>
          <!-- 内容-监测品种 -->
          <el-tooltip
            effect="dark"
            :content="item.goodsName"
            placement="top"
            :visible="item.tooltipgood"
          >
            <div
              class="row-item item-ellipsis"
              @mouseenter="
                handTableItemEnter(item.serviceNum - 1, $event, 'tooltipgood')
              "
              @mouseleave="
                handTableItemLeave(
                  item.serviceNum - 1,
                  item.tooltipgood,
                  'tooltipgood'
                )
              "
            >
              {{ item.goodsName }}
            </div>
          </el-tooltip>
          <!-- 内容-规格等级 -->
          <el-tooltip
            effect="dark"
            :content="item.standardName"
            placement="top"
            :visible="item.tooltipstand"
          >
            <div
              class="row-item item-ellipsis"
              @mouseenter="
                handTableItemEnter(item.serviceNum - 1, $event, 'tooltipstand')
              "
              @mouseleave="
                handTableItemLeave(
                  item.serviceNum - 1,
                  item.tooltipstand,
                  'tooltipstand'
                )
              "
            >
              {{ item.standardName }}
            </div>
          </el-tooltip>
          <!-- 内容-价格 -->
          <div class="row-item item-center">{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, reactive } from 'vue'
import { ElTooltip } from 'element-plus'
interface IState {
  list: string[]
}
export default defineComponent({
  components: { ElTooltip },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    classKey: {
      type: String,
      default: ''
    },
    inputVal: {
      type: String,
      default: ''
    },
    tableClickItem: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props, { emit }) {
    const inputTable: IState = reactive({
      list: []
    })
    let tableDataList: any = ref([])
    // table点击事件
    const handTableRowClick = (row: any) => {
      emit('tableClick', row)
    }
    // 监测品种鼠标悬停事件
    const handTableItemEnter = (index: number, event: any, val: string) => {
      if (event.target.scrollWidth === event.target.clientWidth) {
        return false
      }
      tableDataList.value[index][val] = true
    }
    // 监测品种鼠标离开事件
    const handTableItemLeave = (index: number, bool: boolean, val: string) => {
      if (!bool) {
        return false
      }
      tableDataList.value[index][val] = false
    }
    watch(
      () => [props.inputVal, props.classKey],
      ([newInputVal, newClassKey]) => {
        inputTable.list = []
        if (newInputVal.length <= 0 && newClassKey.length <= 0) {
          return
        }
        let bool = true // fale:点击了分类，true：输入框中的值
        newInputVal.length <= 0 ? (bool = false) : (bool = true)
        tableDataList.value.forEach((item: any) => {
          if (bool) {
            if (item.goodsName.indexOf(newInputVal) > -1) {
              inputTable.list.push(item.serviceCode)
            }
          } else {
            if (item.classData === newClassKey) {
              inputTable.list.push(item.serviceCode)
            }
          }
        })
      }
    )
    watch(
      () => props.tableData,
      (newVal) => {
        newVal.forEach((item: any) => {
          item.tooltipgood = false
          item.tooltipstand = false
        })
        tableDataList.value = newVal
      }
    )
    return {
      inputTable,
      tableDataList,
      handTableRowClick,
      handTableItemEnter,
      handTableItemLeave
    }
  }
})
</script>

<style lang="less" scoped>
.table {
  display: flex;
  justify-content: center;
  .tab-le {
    width: 48%;
    margin-right: 7px;
    margin-left: 7px;
  }
  .tab-ri {
    width: 48%;
    margin-left: 7 px;
  }
  .row {
    display: flex;
    color: #cfd9e8;
    cursor: pointer;
    height: 100%;
    padding: 0px 10px;
    .row-item {
      font-weight: 550;
      font-size: 16px;
      div {
        width: 100%;
      }
    }
    .row-item:nth-child(1) {
      width: 10%;
    }
    .row-item:nth-child(2) {
      margin-left: 2%;
      width: 36%;
    }
    .row-item:nth-child(3) {
      margin-left: 2%;
      width: 40%;
    }
    .row-item:nth-child(4) {
      margin-left: 2%;
      width: 8%;
    }
    .item-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 23px;
    }
    .item-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .row-click {
    background-color: rgba(50, 177, 108, 0.8);
  }
  .row-input {
    color: rgba(255, 234, 0, 0.902);
  }
  .header {
    background-color: rgba(33, 122, 255, 0.4);
    height: 32px;
    margin-bottom: 10px;
    .row-item {
      color: rgba(160, 220, 255, 0.902);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .content {
    height: 23px;
    .row {
      // margin: 3.2px 0;
      margin-bottom: 3.2px;
    }
    .item-tooltip {
      width: 100%;
    }
  }
}
</style>
